<template>
  <div class="wf-box">
    <div class="wf-banner">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index" @click="bannerClink(index)">
          <img v-lazy="image" width="100%" :height="180" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div >
      <van-row class="wf-btn">
        <van-col class="baoxian" span="22" offset="1" @click="insurance">保险</van-col>
        <van-col class="yuyuexiuli" span="11" offset="1"  @click="repairDirectly">估损直接修理</van-col>
        <van-col class="daiban" span="10" offset="1"  @click="agency">代办业务</van-col>
        <van-col class="zhijiexiuli" span="10" offset="1"  @click="directlyRepair">直接预约修理</van-col>
        <van-col class="qita" span="11" offset="1"  @click="otherRepair">其余业务</van-col>
      </van-row>
    </div>
    <div class="wf-text"> 目前为止，共有{{arr1}}位客户使用”易理赔服务“，今天共有{{arr2}}位使用”易理赔服务“的客户</div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      hardText:'服务列表aaa',
      arr1:200,
      arr2:100,
      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
      ],
    };
  },

  methods: {
    bannerClink(index){
      console.log(index);
    },
    insurance(){
      console.log('保险');
    },
    repairDirectly(){
      console.log('估损直接修理');
      this.$router.push({
        path:'/service/details',
        query: {
          hardText:'服务详情说明'
        }
      })
    },
    agency(){
      console.log('代办业务');
    },
    directlyRepair(){
      console.log('直接预约修理');
    },
    otherRepair(){
      console.log('其余业务');
    }
  },
};
</script>

<style lang="scss" scoped>

.wf-box {
 
  .wf-banner {
    min-width: 360px;
    height: 180px;
    text-align: center;
    padding: 8px;
    overflow: hidden;
    background: rgba(212, 212, 212, 0.6);
  }

  .wf-btn {
    height: 360px;
    overflow: hidden;
    .baoxian,
    .yuyuexiuli,
    .daiban,
    .zhijiexiuli,
    .qita {
      text-align: center;
      margin-top: 10px;
      font-size: 24px;
      font-weight: 600;
      background-color: rgba(212, 212, 212, 0.6);
    }

    .baoxian {
      height: 80px;
      line-height: 80px;
    }
    .yuyuexiuli {
      height: 160px;
      line-height: 160px;
    }
    .daiban {
      height: 80px;
      line-height: 80px;
    }
    .zhijiexiuli {
      height: 160px;
      line-height: 160px;
    }
    .qita {
      height: 80px;
      line-height: 80px;
      position: relative;
      top: -90px;
    }
  };
  .wf-text {
    width: 340px;
    text-align: center;
    margin: 10px auto;
  }
}
</style>